<template>
    <div>
        {{ content }}
        <div
            class="tag"
            v-for="item in list"
            :key="item.name"
            :style="{ '--tag-before-color': !item.type ? 'red' : 'green' }"
            @click="gotoDetail(item)"
        >
            {{ item.name }}
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const list = [
    { type: 0, name: '未通过' },
    { type: 1, name: '通过' }
];
const content = ref('我是topLeftTwo啦');
const router = useRouter();
const gotoDetail = (item: any) => {
    router.push({ name: 'top2Left1Detail', query: { name: item.name, type: item.type } });
};
</script>

<style lang="scss" scoped>
.tag {
    position: relative;
    width: 100px;
    height: 20px;
    line-height: 20px;
    border: 1px solid var(--active-color);
    margin-top: 20px;
    cursor: pointer;
    &::before {
        content: '';
        position: absolute;
        display: block;
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 12px;
        background-color: var(--tag-before-color);
    }
}
</style>
